<template>
  <j-modal :title="title" :width="width" :visible="visible" switchFullscreen @ok="handleOk"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
    <j-form-container>
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24" v-if="this.type == 'personal'">
            <a-form-model-item label="退款金额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="refundAmount">
              <a-input-number type="text" placeholder="请填写退款金额" v-model="model.refundAmount"
                style="width: 100%"></a-input-number>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="扣除商家金额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="deductMerchantAmount">
              <a-input-number v-model="model.deductMerchantAmount" placeholder="请填写扣除商家金额"
                style="width: 100%"></a-input-number>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="扣款备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="deductionRemarks">
              <a-input type="textarea" v-model="model.deductionRemarks" placeholder="请填写扣款备注"></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </j-modal>
</template>

<script>
import { postAction } from '@/api/manage'
export default {
  data() {
    return {
      title: '退款',
      width: 800,
      visible: false,
      disableSubmit: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      model: {
        refundAmount: '',
        deductMerchantAmount: '',
        deductionRemarks: '',
      },
      backupModel: '',
      validatorRules: {
        // refundAmount: [{ required: true, message: '请输入退款金额!' }],
        // deductMerchantAmount: [{ required: true, message: '请输入扣除商家金额!' }],
        // deductionRemarks: [{ required: true, message: '请输入扣款备注!' }],
      },
      type: '',
    }
  },
  methods: {
    show(type, value) {
      this.type = type;
      this.visible = true
      this.backupModel = JSON.parse(JSON.stringify(value))
    },
    handleOk() {
      let that = this;
      // 触发表单验证
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.backupModel.deductMerchantAmount = this.model.deductMerchantAmount
          this.backupModel.deductionRemarks = this.model.deductionRemarks
          this.backupModel.state = '已处理'
          let res;
          if (this.type == 'personal') {
            this.backupModel.refundAmount = this.model.refundAmount
            res = await postAction('hc/hcAfterSales/edit', this.backupModel);
          } else if (this.type == 'company') {
            res = await postAction('/hc/hcCompanyMerchantAfterSales/edit', this.backupModel);
          }
          console.log('res', res);
          if (res.success) {
            if (this.type == 'personal') {
              that.$message.success('退款成功')
            } else {
              that.$message.success('已同意售后')
            }
            that.$emit('loadData');
            that.visible = false
          } else {
            this.$message.warning(res.message);
          }
        }
      })
    },
    handleCancel() {
      this.$emit('close')
      this.visible = false;
      this.model = {}
    },
  },
}
</script>

<style></style>